<template>
  <div>
    <div class="wrap">
      <input
        class="input-field"
        type="text"
        placeholder="收货人姓名"
        v-model="addrInfo.addressContact"
      />
      <input
        class="input-field"
        type="number"
        placeholder="手机号码"
        v-model="addrInfo.addressPhone"
      />
      <picker
        class="input-field plus"
        mode="region"
        @change="handleChange"
        :value="location"
      >
        <span v-show="!addrInfo.province" class="placeholder">请选择省、市、区</span>
        <span>{{addrInfo.province}}</span>&nbsp;
        <span>{{addrInfo.city}}</span>&nbsp;
        <span>{{addrInfo.area}}</span>
      </picker>
      <input
        class="input-field"
        type="text"
        placeholder="详细地址"
        v-model="addrInfo.addressInfo"
      />
    </div>
    <div class="action">
      <button type="warn" @click="handleSubmit">{{submitTxt}}</button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCurrentPageParams } from '@/utils'
import { FIND_ADDRESS_INFO, UPDATE_ADDRESS, CREATE_ADDRESS } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      addressId: '',
      addrInfo: {},
      location: []
    }
  },
  computed: {
    ...mapState(['userInfo']),
    submitTxt () {
      if (this.$cookie.get('setAdderss')) {
        return '保存'
      } else {
        return '确认添加'
      }
    }
  },
  watch: {},
  onShow () {
    // this.init()
    this.setAdderssInit()
  },
  methods: {
    init () {
      this.addressId = getCurrentPageParams('addressId')
      if (this.addressId) {
        wx.setNavigationBarTitle({
          title: '编辑地址'
        })
        this.getAddrInfo()
      } else {
        this.location = []
        this.addrInfo = {}
      }
    },
    setAdderssInit () {
      const vm = this
      if (Object.keys(vm.$cookie.get('setAdderss')).length) {
        vm.addrInfo = vm.$cookie.get('setAdderss')
        let { province, city, area } = vm.$cookie.get('setAdderss')
        vm.location = [province, city, area]
      } else {
        vm.addrInfo = {
          province: '',
          city: '',
          area: ''
        }
      }
    },
    getAddrInfo () {
      const vm = this
      FIND_ADDRESS_INFO(vm.addressId)
        .then(r => {
          if (r.data.code === '0') {
            vm.addrInfo = r.data.data
            let { province, city, area } = r.data.data
            vm.location = [province, city, area]
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    handleChange (e) {
      this.location = e.target.value
      let [province, city, area] = this.location
      this.addrInfo.province = province
      this.addrInfo.city = city
      this.addrInfo.area = area
    },
    handleSubmit () {
      const vm = this
      // vm.$loading.show()
      vm.$cookie.set('setAdderss', vm.addrInfo)
      vm.$alert('设置成功', '').then(() => {
        // vm.$loading.close()
        vm.$router.go(-1)
      })
      // if (this.addressId) {
      //   this._updateAddr()
      // } else {
      //   this._addAddr()
      // }
    },
    _addAddr () {
      const vm = this

      let params = { ...vm.addrInfo }
      params.customerId = vm.userInfo.customerId

      CREATE_ADDRESS(params)
        .then(r => {
          vm.$loading.close()
          if (r.data.code === '0' && r.data.data) {
            vm.$router.go(-1)
            vm.$toast('添加成功')
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          vm.$loading.close()
          console.error(e)
        })
    },
    _updateAddr () {
      const vm = this

      UPDATE_ADDRESS(vm.addrInfo)
        .then(r => {
          vm.$loading.close()
          if (r.data.code === '0' && r.data.data) {
            vm.$router.go(-1)
            vm.$toast('修改成功')
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          vm.$loading.close()
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.wrap {
  height: calc(100vh - 46px - 30px);
  padding: 15px;
  > .input-field {
    padding: 5px 0;
    font-size: 16px;
    border-bottom: 1px solid $gray;
    margin: 10px 0;
    &.plus {
      padding: 8px 0;
      .placeholder {
        color: #888;
      }
    }
  }
}
.action {
  padding: 15px 15px 0;
  > button {
    border-radius: 23px;
  }
}
</style>
